<template>
  <div class="app-container">
    <div class="filter-container">
      <el-input
        class="w-100"
        v-model="queryForm.keyword"
        placeholder="关键字搜索"
      />
      <el-button type="primary" :icon="Search" @click="handleSearch"
        >搜索</el-button
      >
      <el-button class="green-button" :icon="Plus" @click="addCategory"
        >增加</el-button
      >
      <el-button class="green-button" :icon="Plus" @click="refreshTableInfo"
        >刷新</el-button
      >
    </div>
    <div class="table-con">
      <el-table
        v-loading="loading"
        :data="tableData"
        style="width: 100%"
        row-key="id"
        @row-contextmenu="handleRowContextmenu"
        border
      >
        <el-table-column prop="id" label="分类ID" />
        <el-table-column prop="name" label="分类名称" />
        <!-- 有可能需要做tips -->
        <el-table-column prop="description" label="商品简介" />
        <el-table-column fixed="right" label="操作" width="120">
          <template #default="scope">
            <el-button
              link
              type="primary"
              size="small"
              @click="editProduct(scope.row)"
              >修改</el-button
            >
            <el-popconfirm
              class="box-item"
              title="确认删除该项?"
              placement="left"
              @confirm="confirmEvent(scope.row)"
              @cancel="cancelEvent"
              :hide-icon="true"
            >
              <template #reference>
                <el-button link size="small" class="mt-3 mb-3">删除</el-button>
              </template>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <Pagination
      v-model:page="pagination.page"
      v-model:size="pagination.pageSize"
      :total="total"
      @pagination="getTableData"
    />
    <div>
      <context-menu v-model:show="show" :options="optionsComponent">
        <context-menu-item label="操作1" @click="onMenuClick(1)" />
        <context-menu-group label="操作2">
          <context-menu-item label="Item1" @click="onMenuClick(2)" />
          <context-menu-item label="Item2" @click="onMenuClick(3)" />
          <context-menu-group label="Child with v-for 8">
            <context-menu-item
              v-for="index of 6"
              :key="index"
              :label="'Item3-' + index"
              @click="onLoopMenuClick(index)"
            />
          </context-menu-group>
        </context-menu-group>
        <context-menu-item label="刷新" @click="onMenuClick(1)">
          <template #icon>
            <Refresh style="width: 1em; height: 1em; margin-right: 8px" />
          </template>
        </context-menu-item>
        <context-menu-item label="删除" @click="onMenuClick(1)">
          <template #icon>
            <Delete style="width: 1em; height: 1em; margin-right: 8px" />
          </template>
        </context-menu-item>
      </context-menu>
    </div>
    <add-edit
      :title="title"
      :visible="showDialog"
      :formData="formData"
      @saveSubmit="saveSubmit"
      @update:visible="showDialog = $event"
    ></add-edit>
  </div>
</template>
<script setup lang="ts">
import { reactive, ref } from "vue";
import { Search, Plus } from "@element-plus/icons-vue";
import { ElMessage } from "element-plus";
import { useTable } from "@/hooks/useTable";
import tableApi from "@/api/table";
import categoryApi from "@/api/category";
import "@imengyu/vue3-context-menu/lib/vue3-context-menu.css";
//导入组件右键菜单组件
import {
  ContextMenu,
  ContextMenuGroup,
  ContextMenuItem,
} from "@imengyu/vue3-context-menu";
import type { MenuOptions } from "@imengyu/vue3-context-menu";
import AddEdit from "@/components/addEditDialog/category/Index.vue";
import cloneDeep from "lodash/cloneDeep";
let title = ref("新增");
const queryForm = reactive({
  keyword: "",
});
const {
  tableData,
  pagination,
  total,
  loading,
  getTableData,
  handleSearch, //搜索
  refreshTableInfo, //刷新
} = useTable(tableApi.categoryTableList, queryForm);
let formData = reactive({
  // nickName:"",
  // unit:"",
  // researchGroup:"",
  // phone:"",
  // address:"",
});
let show = ref(false);
const optionsComponent: MenuOptions = reactive({
  zIndex: 3,
  minWidth: 230,
  x: 500,
  y: 200,
});
let showDialog = ref(false);
const handleRowContextmenu = (row: any, column: any, event: any) => {
  event.preventDefault();
  show.value = true;
  optionsComponent.x = event.clientX;
  optionsComponent.y = event.clientY;
};
const onMenuClick = (num: number) => {};
const editProduct = (row: Object) => {
  showDialog.value = true;
  title.value = "编辑";
  formData = cloneDeep(row);
};
const saveSubmit = (res: any) => {
  showDialog.value = false;
  if (res.data.ok) {
    ElMessage({
      message: res.data.message,
      type: "success",
    });
  }
  handleSearch();
};
const addCategory = () => {
  showDialog.value = true;
  title.value = "新增";
  formData = {};
};
const onLoopMenuClick = (index: number) => {};
const confirmEvent = async (row: any) => {
  const res: any = await categoryApi.deleteCategory(row.id);
  if (res.data.ok) {
    refreshTableInfo();
  } else {
    ElMessage({
      message: res.data.message,
      type: "error",
    });
  }
};
const cancelEvent = () => {};
</script>
<style scoped>
.w-100 {
  width: 200px;
  margin-right: 5px;
}
</style>
